<template>
  <div>
    <a-upload
      :name="name"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      :action="action"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <div v-if="imageUrl" style="position: relative"  @click="(e)=>e.stopPropagation()"  >
        
        <a-popconfirm
    title="确定删除图片?"
    ok-text="Yes"
    cancel-text="No"
    @confirm="cancle"
   
  >
    <a-icon
          type="close-circle"
          
          style="
            color: red;
            position: absolute;
            top: -15px;
            right: -7px;
            font-size: 17px;
          "
        />
  </a-popconfirm>
        <img
        @click.stop="previewVisible=true"
          :style="{ width: width, height: width }"
          :src="imageUrl"
          alt="avatar"
         
        />
      </div>

      <div v-else>
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">上传</div>
      </div>
    </a-upload>


     <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
      <img alt="example" style="width: 100%" :src="imageUrl" />
    </a-modal>
  </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  props: {
    type: {
      type: [Number, String],
      default: 0,
    },
     imagUrl: {
      type: [String],
      default:''
    },
    width: {
      type: [Number, String],
      default: "100px",
    },
  },
  data() {
    return {
      loading: false,
      imageUrl: "",
      action: "",
      name: "file",
      previewVisible:false
    };
  },

  created() {
    console.log(this.type )
    if(this.imagUrl){
        this.imageUrl=this.imagUrl
    }
    if (this.type == 1) {
      this.action = this.$layoutUrl;
      this.name = "file";
    } else if (this.type == 2) {
      this.name = "files";
      this.action = this.$macUrl;
    } else {
      this.action = this.$imgUrl;
      this.name = "file";
    }
  },

  //   watch:{
  //     imgUrl:{
  //         deep: true,
  //       handler(val) {
  //         // this.imageUrlin(val)
  //  console.log(122);
  //       console.log(val);
  //       //  this.imageUrl=this.imgUrl;
  //         // console.log(val);
  //       return
  //       }

  //     },
  //   },
  methods: {
    
    imageUrlin(val) {
      console.log(val);
      this.imageUrl = val;
    },
    cancle() {
      this.imageUrl = "";
      let fileObj = [];
      this.$emit("input", fileObj);
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        console.log(info.file.status);
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl;
        
          let index = info.fileList.length - 1;
          if (
            info.fileList[index].response.msgCode == 0 ||
            info.fileList[index].response.MsgCode == 0
          ) {
            let list = info.fileList[index];
            info.fileList = [];
            // info.fileList.push(list)
            let fileObj;
            if (this.type) {
              fileObj = list.response.Data;
            } else {
              fileObj = list.response.data;
            }
            console.log('========================')
             console.log(fileObj)
            this.$emit("input", fileObj);
          }
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("只能上传jpg,png!");
      }
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error("文件最大20MB!");
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>
<style scoped lang="less">
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
